<template>
  <div class="medical-records-container">
    <van-nav-bar
      title="我的就诊记录"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list-wrapper">
          <van-cell-group
            v-for="record in recordList"
            :key="record.id"
            inset
            class="record-item"
            @click="viewDetail(record)"
          >
            <van-cell :title="record.departmentName" :label="formatDate(record.visitTime)">
              <template #value>
                <van-tag :type="getStatusType(record.status)">
                  {{ getStatusText(record.status) }}
                </van-tag>
              </template>
            </van-cell>
            <van-cell title="就诊医生" :value="record.doctorName" />
            <van-cell title="病历编号" :value="record.recordNo" />
            <van-cell v-if="record.diagnosis" title="诊断结果" :value="record.diagnosis" />
            <van-cell v-if="record.treatment" title="治疗方案" :value="record.treatment" />
            <van-cell v-if="record.remark" title="备注" :value="record.remark" />
            
            <!-- 如果有住院信息 -->
            <template v-if="record.wardId">
              <van-cell title="住院信息" :value="record.wardName + ' - ' + record.bedNumber + '号床'" />
              <van-cell title="入院时间" :value="formatDate(record.admissionTime)" />
              <van-cell v-if="record.dischargeTime" title="出院时间" :value="formatDate(record.dischargeTime)" />
            </template>
          </van-cell-group>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getMyMedicalRecords } from '../api'

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const recordList = ref([])

// 返回上一页
const onClickLeft = () => router.back()

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '草稿',
    1: '已完成',
    2: '已取消',
    3: '住院中',
    4: '已出院'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态标签类型
const getStatusType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'primary',
    4: 'success'
  }
  return typeMap[status] || 'default'
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  // 如果是 ISO 格式的日期字符串
  if (date.includes('T')) {
    return date.split('T')[0]
  }
  // 如果已经是 YYYY-MM-DD 格式
  return date
}

// 查看详情
const viewDetail = (record) => {
  router.push(`/medical-record-detail/${record.id}`)
}

// 加载数据
const loadData = async () => {
  try {
    const res = await getMyMedicalRecords()
    if (res.code === 200) {
      recordList.value = res.data
    } else {
      showToast(res.message || '获取就诊记录失败')
    }
  } catch (error) {
    console.error('获取就诊记录失败：', error)
    showToast('获取就诊记录失败')
  }
  loading.value = false
  finished.value = true
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  loadData()
  refreshing.value = false
}

// 上拉加载
const onLoad = () => {
  loadData()
}

// 初始化
loadData()
</script>

<style lang="scss" scoped>
.medical-records-container {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.list-wrapper {
  padding: 12px;
}

.record-item {
  margin-bottom: 12px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
</style> 